// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use './palette' as *;
@use './typography' as *;
@use './layout' as *;
@use './flex' as *;

@mixin indico-page {
  header {
    $separator-margin: 0.42rem;
    position: relative;
    margin-bottom: 1.8em;

    .title .text {
      font-size: 1.428em; // FIXME: move to design system
    }

    h2,
    h3 {
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;
      color: #333; // FIXME: move to design system
    }

    h2 {
      margin-right: 0.5rem;
      font-size: 150%; // FIXME: move to design system
      font-weight: normal;
    }

    h3 {
      margin-top: $separator-margin;
      font-size: 100%;
    }

    .back-button {
      position: absolute;
      top: 11px;
      left: -20px;
      font-size: 15px;
      color: $pastel-gray;

      &:hover {
        color: $dark-gray;
      }
    }

    .title {
      display: flex;
      align-items: flex-start;
      padding-top: 0.4rem;
      min-height: 2rem;
      border-bottom: 1px solid $separator-color;
      margin-bottom: 1rem;

      > .text {
        flex-grow: 1;

        > .title-with-actions {
          display: flex;
          align-items: center;
          gap: 1em;

          h2,
          h3 {
            font-size: 120%;
            font-weight: normal;
            display: inline;
            margin-right: 0;
          }

          .actions {
            display: inline-block;
            vertical-align: bottom;
            font-size: 0.8em;
          }

          .i-button[class*='icon-']::before {
            // FIXME: temporary fix, convert action controls to DS
            font-size: 1em;
            margin-right: 0.2em;
          }

          .i-dropdown > li a {
            // FIXME: temporary fix, convert action dropdowns to DS
            line-height: 1.7em;
          }
        }
      }

      > .actions {
        flex-grow: 0;
        flex-shrink: 0;
        white-space: nowrap;
      }
    }

    .page-description {
      @include font-family-title-light();
      @extend .fixed-width;
      color: $dark-gray;
      font-size: 1.2em;
      margin-top: $separator-margin;
    }

    .page-info {
      @include font-family-title();
      color: $dark-gray;
      margin-top: $separator-margin;
    }
  }
}

@mixin indico-page-standalone {
  @include indico-page();

  header {
    margin-top: 1em;
  }
}

.banner {
  @extend .flexrow;

  $banner-color: #000;
  $banner-title-color: $dark-orange;
  $banner-subtitle-color: $dark-gray;
  $banner-title-margin: 19px;

  color: $banner-color;
  max-width: 800px;
  margin-top: 10px;

  &.full-width {
    max-width: none;
    margin-bottom: -$banner-title-margin;

    .title {
      flex-grow: 1;
    }
  }

  .toolbar {
    padding: 0;
  }

  .title {
    margin-bottom: $banner-title-margin;
    font-family: 'Roboto Light', sans-serif;
    font-size: 2em;
    color: $banner-title-color;

    a:not(:hover) {
      color: inherit;
    }

    .subtitle {
      color: $banner-subtitle-color;
      font-size: 0.5em;

      a {
        border-bottom: 1px dashed;
      }
    }

    .date {
      color: $banner-color;
      font-size: 0.75em;
      font-style: italic;
    }
  }
}

.dialog-page {
  @include indico-page();

  max-width: 800px;
}

.management-page {
  @include indico-page();

  div.page-content {
    @extend .fixed-width;
  }

  &.wide {
    .page-content {
      max-width: 1000px !important;
    }
  }

  &.ultra-wide {
    .page-content {
      max-width: 1600px !important;
    }
  }
}

.fixed-width-standalone-page {
  @include indico-page-standalone();

  margin-left: auto;
  margin-right: auto;
  width: 1000px;

  .page-content {
    max-width: 1000px;
  }
}

.fixed-width-standalone-text-page {
  // standalone page that looks good if there's just a big bunch of text
  // which would look ugly with 1000px width and the default font size
  // which is rather small
  @extend .fixed-width-standalone-page;

  width: 800px;

  .page-content {
    max-width: 800px;
    font-size: 1.2em;

    p:first-child {
      margin-top: 0;
    }

    p:last-child {
      margin-bottom: 0;
    }
  }
}

.conference-page {
  @include indico-page();

  header h2 {
    color: $dark-orange;
    padding-right: 5px;

    .track-name {
      font-style: italic;
    }
  }
}

.meeting-header {
  max-width: 800px;
  margin: 2em auto 0 auto;

  h1 {
    color: $dark-blue;
  }
}

.meeting-page {
  @include indico-page();
  max-width: 800px;
  margin: 2em auto 0 auto;
}

.event-wrapper {
  width: 1000px;
  margin: 30px auto;
  margin-top: 18px;
}

.conference-title-link {
  font-size: 33px;
  background: transparent;
  color: white;
}

.search-page {
  @include indico-page-standalone();

  .title .text {
    margin-left: 2%;
  }
}
